<template>
  <div class="box-wrapper" v-loading.fullscreen.lock="loading" :style="{height:!list.length?'90%':''}">
    <div class="create-btn" @click="showAdd">新增油罐</div>
    <div class="box-card" v-if="list.length">
      <div class="item-box" v-for="item in list">
        <el-popover placement="right" :width="160" trigger="hover">
          <template #reference>
            <div>
              <div class="oil-title">
                <div class="name">{{item.tankNo}}-<span :style="{color: item.goodsName.indexOf('汽油')>-1?'#4B7EFE':'#FA8C16'}">{{item.goodsName}}</span></div>
                <div class="capacity">最大罐容: {{item.maxCapacity}}m³</div>
              </div>
              <div class="oil">
                <template v-if="item.maxCapacity > item.currentCapacity">
                  <img class="oil-bg" src="https://web.czb365.com/ty/czb-mosi-wms-web/cylinder-bg1.png" alt="">
                  <img class="oil-top" :style="{bottom: item.height + 30 + 'px',transition: 1+'s'}" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-top.png" alt="">
                  <img class="oil-center" :style="{height: item.height+'px',transition: 1+'s'}" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-center.png" alt="">
                  <img class="oil-bottom" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-bottom.png" alt="">
                </template>
                <img v-else class="oil-bg" src="https://web.czb365.com/ty/czb-mosi-wms-web/oil-full.png" alt="">
                <div class="curr-capacity">
                  <div>{{item.currentCapacity}}吨</div>
                  <div>应有库存</div>
                </div>
              </div>
            </div>
          </template>
          <div class="detail">
            <div class="detail-item" v-for="storage in item.storageInfos">
              <span>{{storage.customerName}}</span><span>{{storage.capacity}}吨</span>
            </div>
          </div>
        </el-popover>
      </div>
    </div>
    <div class="empty-bg" v-else>
      <img src="https://web.czb365.com/ty/czb-mosi-wms-web/empty-bg.png" alt="">
      <span>暂无数据</span>
    </div>
    <el-dialog title="新增油罐" v-model="isShowAdd" width="820px" center @opened="proxy.$refs.form.clearValidate()">
      <el-form label-width="110px" label-position="right" size="small" ref="form" :model="formParams" :rules="formRules">
        <div class="box-form small-form-item">
          <el-form-item label="罐号" prop="tankNo">
            <el-input placeholder="请输入罐号" maxlength="10" clearable v-model="formParams.tankNo"></el-input>
          </el-form-item>
          <el-form-item label="最大罐容" prop="maxCapacity">
            <el-input placeholder="请输入最大罐容" maxlength="20" clearable v-model="formParams.maxCapacity">
              <template #append>m³</template>
            </el-input>
          </el-form-item>
          <el-form-item label="介质" prop="goodsName">
            <el-select clearable placeholder="请选择介质" v-model="formParams.goodsName">
              <el-option v-for="good in goodsList" :key="good.name" :label="good.name" :value="good.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否已有库存" prop="empty">
            <el-select clearable placeholder="请选择是否已有库存" v-model="formParams.empty">
              <el-option :value="false" label="是"></el-option>
              <el-option :value="true" label="否"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="box-form small-form-item" v-for="(item, index) in formParams.storageInfo" :key="index" v-if="formParams.empty===false">
          <el-form-item label="客户名称" :prop="`storageInfo[${index}].customerId`" :rules="formRules.customerId">
            <el-select clearable placeholder="请选择客户名称" v-model="item.customerId">
              <el-option v-for="customer in customerList" :disabled="customerDisabled(item, customer)" :value="customer.key" :label="customer.label" :key="customer.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数量" :prop="`storageInfo[${index}].goodsCount`" :rules="formRules.goodsCount">
            <el-input placeholder="请输入数量" v-model="item.goodsCount" maxlength="10">
              <template #append>吨</template>
            </el-input>
          </el-form-item>
          <i class="icon el-icon-circle-plus-outline" @click="addCustomer"></i>
          <i class="icon el-icon-remove-outline" @click="removeCustomer(index)" v-if="index || formParams.storageInfo.length>=2"></i>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="small" @click="isShowAdd = false">取 消</el-button>
          <el-button size="small" type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, getCurrentInstance, computed } from 'vue'
import { queryGoodsDictionary, queryWarehouseOrCustomer } from '@/api/common'
import { queryWareHouseStorageInfo, createTank } from '@/api/oilDepotStock'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    let formRules = reactive({
      tankNo: { required: true, message: '请输入罐号', trigger: 'change' },
      maxCapacity: [
        { required: true, message: '请输入最大罐容', trigger: 'change' },
        { required: true, pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '正数且最多2位小数', trigger: 'change' }
      ],
      goodsName: { required: true, message: '请选择介质', trigger: 'change' },
      empty: { required: true, message: '请选择是否已有库存', trigger: 'change' },
      customerId: { required: true, message: '请选择客户名称', trigger: 'change' },
      goodsCount: [
        { required: true, message: '请输入数量', trigger: 'change' },
        { required: true, pattern: /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/, message: '正数且最多2位小数', trigger: 'change' }
      ]
    })
    let list = ref([])
    let loading = ref(false)
    const getList = async () => {
      loading.value = true
      const { code, result } = await queryWareHouseStorageInfo()
      loading.value = false
      if (code !== 200) return
      result.forEach(item => {
        item.height = 0
      })
      list.value = result
      setTimeout(() => {
        result.forEach(item => {
          item.height = (item.currentCapacity / item.maxCapacity) * 200
        })
        list.value = result
        proxy.$forceUpdate()
      }, 0)
    }
    getList()
    let goodsList = ref([])
    let customerList = ref([])
    const getConfig = async () => {
      const [goodsRes, customerRes] = await Promise.all([queryGoodsDictionary(), queryWarehouseOrCustomer({ userType: 10 })])
      if (goodsRes.code === 200) {
        goodsList.value = goodsRes.result
      }
      if (customerRes.code === 200) {
        customerList.value = customerRes.result
      }
    }
    getConfig()
    let isShowAdd = ref(false)
    let formParams = ref({})
    const showAdd = () => {
      formParams.value = {
        storageInfo: [{}]
      }
      isShowAdd.value = true
    }
    const addCustomer = () => {
      formParams.value.storageInfo.push({})
    }
    const removeCustomer = (index) => {
      formParams.value.storageInfo.splice(index, 1)
    }
    const save = () => {
      proxy.$refs.form.validate(async (valid) => {
        if (!valid) return
        const { code } = await createTank({ ...formParams.value })
        if (code !== 200) return
        proxy.$message.success('操作成功')
        isShowAdd.value = false
        getList()
      })
    }
    const customerDisabled = computed(() => {
      return function ({ customerId }, { key }) {
        const storageInfo = formParams.value.storageInfo
        return storageInfo.some(item => item.customerId === key) && customerId !== key
        return
      }
    })
    return { proxy, formRules, list, goodsList, customerList, loading, isShowAdd, formParams, showAdd, addCustomer, removeCustomer, save, customerDisabled }
  }
})

</script>

<style scoped lang="less">
  @import url('@/assets/css/form-box.less');

  .box-wrapper {
    width: 100%;
    background: #ffffff;
    border-radius: 11px;
    padding: 40px;
    box-sizing: border-box;
    .create-btn {
      position: absolute;
      top: 10px;
      right: 60px;
      width: 126px;
      height: 44px;
      background: #409EFF;
      border-radius: 8px;
      font-size: 18px;
      color: #ffffff;
      line-height: 44px;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #66b1ff;
      }
    }
    .box-card {
      display: flex;
      flex-wrap: wrap;
      padding: 0;
      margin: 0;
      .item-box {
        margin-bottom: 100px;
        width: 33.33%;
        min-width: 300px;
        display: flex;
        justify-content: center;
        .oil-title {
          .name {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 5px;
            text-align: center;
          }
          .capacity {
            text-align: center;
            font-size: 16px;
            color: #CF1322;
            margin-bottom: 5px;
          }
        }
        .oil {
          width: 182px;
          height: 281px;
          position: relative;
          overflow: hidden;
          margin: 0 auto;
          > img {
            position: absolute;
            width: 168px;
            left: 7px;
          }
          .oil-bg {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
          }
          .oil-center {
            bottom: 30px;
          }
          .oil-bottom {
            bottom: 10px;
          }
          .curr-capacity {
            position: absolute;
            width: 100%;
            bottom: 100px;
            z-index: 10;
            > div {
              font-size: 20px;
              font-weight: bold;
              color: #333333;
              width: 100%;
              text-align: center;
              &:nth-last-child(1) {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }

  .detail {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 10px;
    .detail-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eeeeee;
      padding: 5px 0;
      &:nth-child(even) {
        background: #F9FAFC;
      }
      &:nth-last-child(1) {
        border: 0;
      }
      > span {
        &:nth-child(1) {
          flex: 1;
          margin-right: 10px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        &:nth-last-child(1) {
          font-weight: 500;
        }
      }
    }
  }

  .icon {
    font-size: 30px;
    line-height: 35px;
    color: #cccccc;
    cursor: pointer;
    margin-left: 5px;
    &:hover {
      color: #4B7EFE;
    }
  }

  .dialog-footer {
    .el-button {
      width: 70px;
    }
  }

  .empty-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200px;
    span {
      color: #666666;
    }
  }
  .small-form-item {
    .el-form-item {
      margin-left: 0!important;
      margin-right: 10px!important;
    }
  }
</style>
